<template>

	<div>
		
		
		<!-- 写死的样式 -->
		<div  class="hightlight">
			1我是高亮的颜色	
			
		</div>
		
		
		
		<!-- 绑定一个数据到 class属性上 -->
		<div  v-bind:class="cls"  >
			2我是高亮的颜色	
			
		</div>
		
		<!-- 简写 v-bind -->
		<div  :class="cls">
			3我是高亮的颜色	
			
		</div>
		
	
		<!-- 绑定对象  key:True、false  -->
		<div  :class="{hightlight:hightlightFlag}">
			4我是高亮的颜色	
		</div>
		
		<!-- 三木运算符 -->
		  <div :class="username=='admin'?'showAdmin':''">管理员</div>
		
		
		
		
		
		<!-- sty :样式直接写的 -->
		
		<div  v-bind:style="sty"  >
			5我是高亮的颜色	
		</div>
		
		<div  :style="sty"  >
			6我是高亮的颜色	
		</div>
		
		
		<div :style="{color:colorValue,fontSize:fontSizeValue}" style="background-color: antiquewhite;">
			7我是高亮的颜色	
		</div>
		
		
		<!-- 绑定其他属性 -->
		<div :title="title">
			8 文本文本文本文本文本文本文	
		</div>
		
		
		
	</div>
	
	
</template>

<script>
	export default{
		name:'BindingAttribute',
		data(){
			return {
				cls:'hightlight',
				hightlightFlag:true,
				username:'root',
				sty:'margin: 10px;background-color: blue;color: cyan;',
				colorValue:'green',
				fontSizeValue:'30px',
				title:'提示文字-----',
				
			}
		}
	}
	
	
</script>

<style scoped>
	
	.hightlight{
		margin: 10px;
		background-color: blue;
		color: cyan;
		
	}
	
	
	.showAdmin{
		
		color: red;
		font-size: 1.5em;
		
		
		
	}
	
</style>